<template>
	<view>
		<view style="background-color: #FFFFFF;">
			<cu-custom :isBack="true">
				<block slot="backText"></block>
				<block slot="content">货物签收</block>
			</cu-custom>
		</view>
		<view class="cu-bar bg-white search fixed" :style="[{top:CustomBar + 'px'}]">
			<view class="search-form round">
				<text class="cuIcon-search"></text>
				<input @confirm="sub" v-model="val" type="text" placeholder="输入搜索的关键词" focus></input>
			</view>
			<view class="action" @click="toScan">
				<text class="cuIcon-scan" style="font-size: 56rpx;"></text>
			</view>
		</view>
		<view style="margin-top: 13%;">
			<view class="padding" style="font-weight: 1000; font-size: 16px;"> 调拨单：{{tvH.ctvcode}},剩余<b style="color: #0081FF;font-size: 18px;">{{tvH.iqty}} </b>条</view>
				<view >
					<view class="padding" style="font-weight: 700; font-size: 16px; margin-bottom: 20px;">{{tvC.cinvcode}} — {{tvC.cinvname}}
					</view>
					<form>
						<view class="scroll-view-item">
							<view class="cu-form-group ">
								<view class="title" >调拨数量：</view>
								<input :value="tvC.itvquantity" placeholder="暂无数据" name="input" disabled="false" ></input>
							</view>
						</view>
						<view class="scroll-view-item">
							<view class="cu-form-group ">
								<view class="title" style="color: red;">签收数量：</view>
								<input :value="tvC.qsiqty" placeholder="暂无数据" name="input" ></input>
							</view>
						</view>
					</form>
				</view>
			</block>
			<button type="primary" class="no-border confirm-btn" :disabled="isReC" @click="upLoadDt">签收</button>
		</view>
		<view class="action-section" style="left: 3%;">
			<view v-if="tvH.iqty > 0">
				<button type="primary" class=""  @click="upBefor">上一条</button>
			</view>
		</view>
		<view class="action-section">
			<view v-if="tvH.iqty > 0">
				<button type="primary" class=""  @click="upAfter">下一条</button>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex';
	export default {
		data() {
			return {
				CustomBar: this.CustomBar, //滚动定位用
				val:'',//接收值
				dt:'',//用于显示
				isReC:false,
				tvH:{},//主表数据
				tvC:{},//子表数据
				indexList:0,//记录数据
				list:[],//记录原始
			}
		},
		computed: {
			...mapState(['hasLogin', 'userInfo', 'auditlist', 'corpCode']),
		},
		onLoad() {
			this.loadData();
		},
		methods: {
			//分装件货清单数据
			insertListHc(list,index){
				this.indexList = index;
				this.tvH.iqty = list.length;
				for(var i=index;i<list.length;i++){
					var tvc= {
						acctId : list[index].acctId,
						autoid : list[index].autoid,
						cbsysbarcode : list[index].cbsysbarcode,
						ccomunitcode : list[index].ccomunitcode,
						cinvcode : list[index].cinvcode,
						cinvname : list[index].cinvname,
						id : list[index].id,
						irowno : list[index].irowno,
						isNewRecord : list[index].isNewRecord,
						itvquantity : list[index].itvquantity,
						qsiqty:list[index].itvquantity,
						ctvbatch:list[index].ctvbatch==undefined?'':list[index].ctvbatch,
					}
					this.tvC = tvc;
					break;
				}
			},
			
			/**
			 * 加载数据
			 */
			loadData(){
				uni.request({
					url:this.serverURL_a+'/wh/db/whDbTransVouch/findDbByCtvcode',
					data:{
						cbarcode : this.val,
						__sid:this.userInfo.sessionid
					},
					header: {
						'content-type': 'application/x-www-form-urlencoded;charset=utf-8',
					},
					method: 'POST',
					success:function(data){
						this.val = '';
						var res = data.data;
						if(res.result == 'true'){
							var resDt = res.data;
							//封装主表数据
							var tvh={
								id:resDt.id,
								ctvcode:resDt.ctvcode,
								itransflag:resDt.itransflag,
								acctId:resDt.acctId,
								cmaker:resDt.cmaker,
								ciwhcode:resDt.ciwhcode,
								cowhcode:resDt.cowhcode,
								iqty:resDt.whDbTransVouchsList.length
							};
							this.tvH = tvh;
							this.insertListHc(resDt.whDbTransVouchsList,0);
							this.list = resDt.whDbTransVouchsList;
						}else{
							uni.showModal({
							    content: res.message,
								showCancel:false,
							});
							return;
						}
					}.bind(this),
					fail:function(){
						this.$api.msg('服务已停止,请稍后再试');
						return;
					}.bind(this),
				});
			},
			/**
			 * 签收数据
			 */
			upLoadDt(){
				this.isReC = true;
				if(this.tvH == {} || this.tvC == {}){
					uni.showModal({
					    content: `数据为空，请退出重试！`,
						showCancel:false,
					});
					this.isReC = false;
				}
				uni.request({
					url:this.serverURL_a+'/wh/db/whDbReceive/uploadDt?__ajax=json',
					data:{
						dbid:this.tvH.id,
						autoid:this.tvC.autoid,
						ctvcode:this.tvH.ctvcode,
						cinvcode:this.tvC.cinvcode,
						itvquantity:this.tvC.itvquantity,
						ctvbatch:this.tvC.ctvbatch,
						iqty:this.tvC.qsiqty,
						__sid:this.userInfo.sessionid
					},
					header: {
						'content-type': 'application/x-www-form-urlencoded;charset=utf-8',
					},
					method: 'POST',
					success:function(data){
						this.val = '';
						var res = data.data;
						this.isReC = false;
						if(data.statusCode!="200"){
							uni.showModal({
							    content: res.message,
								showCancel:false,
							});
							return;
						}
						if(res.result == 'true'){
							this.$api.msg('签收成功!');
							this.list.splice(this.indexList,1)
							if(this.list.length > 0){
								this.insertListHc(this.list,this.indexList+1)
							}
						}else{
							uni.showModal({
								content: res.message,
								showCancel:false,
							});
							return;
						}
					}.bind(this),
					fail:function(){
						this.$api.msg('服务已停止,请稍后再试');
						return;
					}.bind(this),
				});
			},
			//上一页
			upBefor(){
				if(this.indexList != 0){
					this.insertListHc(this.list,this.indexList-1);
				}else{
					this.$api.msg('已到首页!');
					return;
				}
			},
			//下一页
			upAfter(){
				if(this.indexList != this.list.length-1){
					this.insertListHc(this.list,this.indexList+1);
				}else{
					this.$api.msg('已到最后一页!');
					return;
				}
			},
			/**
			 * 扫码
			 */
			toScan(){
				uni.scanCode({
					onlyFromCamera: true,
					success: function(res) {
						this.val = res.result;
						this.sub();
					}.bind(this)
				});
			},
			sub(){
				if(this.val.indexOf("||st12|") > -1){
					this.loadData();
				
				}else if(this.val == '' || (this.val.indexOf("sc") == -1 && this.val.indexOf("dh") == -1 && this.val.indexOf("po") == -1)){
					this.val = '';
					uni.showModal({
					    content: "请扫描正确的条码!",
						showCancel:false,
					});
					this.val = '';
					return;
				}
				uni.request({
					// url:this.serverURL_a+'/bas/basInventory/findMapCinvcode',
					url:this.serverURL_a+'/barcode/decode/getInvInfo',
					data:{
						// hw : this.val,
						__sid:this.userInfo.sessionid,
						barCode: this.val,
						bneedStore: '0',
						bmustAcct:'0'
					},
					header: {
						'content-type': 'application/x-www-form-urlencoded;charset=utf-8',
					},
					method: 'POST',
					success:function(res){
						this.val = '';
						if(res.data.result=="false"){
							uni.showModal({
							  content: res.data.message,
							  showCancel:false,
							})
							return false;
						}
						this.viewCode = res.data.data.basInv.viewCode;//存货
						this.cinvcode = res.data.data.basInv.cinvcode;//存货
						for(var i =0 ;i<this.list.length;i++){
							console.log(this.list[i].cinvcode)
							if(this.list[i].cinvcode==this.viewCode){
								this.insertListHc(this.list,i)
							}
						}
					}.bind(this),
					fail: function() {
						uni.hideLoading()
						this.$api.msg('无法连接服务，请联系管理');
						this.isReC = false;
						return;
					}.bind(this)
				})
			},
		}
	}
</script>

<style>

	
	/* 底部栏 */
	.action-section{
		/* #ifdef H5 */
		/* #endif */
		position:fixed;
		left: 75%;
		bottom:30upx;
		z-index: 95;
		display: flex;
		align-items: center;
		background: rgba(255,255,255,.9);
		border-radius: 40upx;
		.checkbox{
			height:52upx;
			position:relative;
			image{
				width: 52upx;
				height: 100%;
				position:relative;
				z-index: 5;
			}
		}
		.clear-btn{
			position:absolute;
			left: 26upx;
			top: 0;
			z-index: 4;
			width: 0;
			height: 52upx;
			line-height: 52upx;
			padding-left: 38upx;
			font-size: $font-base;
			color: #fff;
			background: $font-color-disabled;
			border-radius:0 50px 50px 0;
			opacity: 0;
			transition: .2s;
			&.show{
				opacity: 1;
				width: 120upx;
			}
		}
		.total-box{
			flex: 1;
			display:flex;
			flex-direction: column;
			text-align:right;
			padding-right: 40upx;
			.price{
				font-size: $font-lg;
				color: $font-color-dark;
			}
			.coupon{
				font-size: $font-sm;
				color: $font-color-light;
				text{
					color: $font-color-dark;
				}
			}
		}
		.confirm-btn{
			padding: 0 38upx;
			margin: 0;
			border-radius: 100px;
			height: 76upx;
			line-height: 76upx;
			font-size: $font-base + 2upx;
			background: $uni-color-primary;
		}
	}

	.indexBar {
		position: fixed;
		right: 0px;
		bottom: 0px;
		padding: 20upx 20upx 20upx 60upx;
		display: flex;
		align-items: center;
	}

	.indexBar .indexBar-box {
		width: 40upx;
		height: auto;
		background: #fff;
		display: flex;
		flex-direction: column;
		box-shadow: 0 0 20upx rgba(0, 0, 0, 0.1);
		border-radius: 10upx;
	}

	.indexBar-item {
		flex: 1;
		width: 40upx;
		height: 40upx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 24upx;
		color: #888;
	}

	movable-view.indexBar-item {
		width: 40upx;
		height: 40upx;
		z-index: 9;
		position: relative;
	}

	movable-view.indexBar-item::before {
		content: "";
		display: block;
		position: absolute;
		left: 0;
		top: 10upx;
		height: 20upx;
		width: 4upx;
		background-color: #f37b1d;
	}

	.indexToast {
		position: fixed;
		top: 0;
		right: 80upx;
		bottom: 0;
		background: rgba(0, 0, 0, 0.5);
		width: 100upx;
		height: 100upx;
		border-radius: 10upx;
		margin: auto;
		color: #fff;
		line-height: 100upx;
		text-align: center;
		font-size: 48upx;
	}
</style>
